<template>
	<view
		style="background-color: #fff;z-index: 111;position: fixed; width: 100%;line-height: 44px;padding-top: 45px;text-align: center;z-index: 99999999;">
		<u-icon name="arrow-left" style="float:left;margin-top: 20rpx;margin-left: 10rpx;" size="36"
			@click="jump('pages/index/index')"></u-icon>
		睡眠分析
	</view>
	<view class="body">
		<view class="bg">
			<image :src="$IMAGE_BASE_URL + '/img/new/shuimianbg.png'"
				style="width: 100%; height:671rpx;margin: auto; display: block;"></image>
		</view>
		<view
			style="margin-bottom: 10px;background-color: #98E8C1;padding: 10px; z-index: 111;position: relative;margin-top: 89px;">
			<u-row>
				<u-col span="6">
					<view style="background-color: #fff;width: 100%; line-height: 52rpx; text-align: center;">
						睡眠详情
					</view>
				</u-col>
				<u-col span="6">
					<view style="text-align: center;"
						@click="jump('pages/chart/HealthReport/month',{iotDeviceId:iotDeviceId})">
						睡眠统计
					</view>
				</u-col>
			</u-row>
		</view>
		<view class="pingfenbody">
			<view class="title" style="overflow: hidden;">
				<!-- <view @click="show = true">{{$u.timeFormat(startTime, 'yyyy年mm月dd日')}}<u-icon name="arrow-down-fill"
						color="#646464" size="28"></u-icon></view>
				<u-calendar v-model="show" @change="change"></u-calendar> -->
				<picker mode="date" :value="$u.timeFormat(endTime, 'yyyy-mm-dd')" :start="startDate" :end="endDate"
					@change="bindDateChange" fields="day">
					<view class="uni-input dateText">
						{{$u.timeFormat(endTime, 'yyyy-mm-dd')}}<u-icon name="arrow-down-fill" color="#646464"
							size="28"></u-icon>
					</view>
				</picker>
			</view>
			<view style="margin-bottom: 10px;margin-top: 20rpx;">
				<u-row>
					<u-col span="4">
						<view :class="getClassName(val)">
							<view class="pingfen">
								<view>睡眠评分</view>
								<view style="font-size: 60rpx;font-weight:bold;">
									{{report?report.sleepQualityScore:'--'}}
								</view>
								<view class="biaoqian">
									{{report?qualityText(report.sleepQualityScore):"--"}}
								</view>
							</view>
						</view>
					</u-col>
					<u-col span="8">
						<view class="date-info">
							<!-- <view class="chaoguo">
								<image src="@/img/shuimian1.png" style="height: 30rpx;width: 30rpx;"></image>
								<text>今日睡眠质量已超过95%用户</text>
							</view> -->
							<view class="info">
								<!-- <view class="w50">
									<image src="@/img/shuimian2.png" style="height: 80rpx;width: 80rpx;"></image>
									<view class="fl">
										<view class="name">上床</view>
										<view class="fwb">09:30</view>
									</view>
								</view> -->
								<view class="w50">
									<image :src="$IMAGE_BASE_URL + '/img/shuimian4.png'"
										style="height: 80rpx;width: 80rpx;"></image>
									<view>
										<view class="name">起床</view>
										<view class="fwb">{{report?report.soberTimeh+':'+report.soberTimem:'--:--'}}
										</view>
									</view>
								</view>
								<view class="w50">
									<image :src="$IMAGE_BASE_URL + '/img/shuimian3.png'"
										style="height: 80rpx;width: 80rpx;"></image>
									<view>
										<view class="name">入睡</view>
										<view class="fwb">{{report?report.sleepTimeh+':'+report.sleepTimem:'--:--'}}
										</view>
									</view>
								</view>
								<view class="w50" style="margin-top: 20rpx;">
									<view>
										<view class="name">疲劳程度</view>
										<view class="fwb plcd">{{interval.fatigueResult_xmyk}}</view>
									</view>
								</view>
								<view class="w50" style="margin-top: 20rpx;">
									<view>
										<view class="name">房颤</view>
										<view class="fwb plcd" style="background-color: #FAC625;">
											{{interval.afResult_xmyk}}
										</view>
									</view>
								</view>
								<!-- <view class="w50">
									<image src="@/img/shuimian5.png" style="height: 80rpx;width: 80rpx;"></image>
									<view class="fl">
										<view class="name">清醒</view>
										<view class="fwb">09:30</view>
									</view>
								</view> -->
							</view>
						</view>
					</u-col>
				</u-row>
			</view>
		</view>

		<view style="z-index: 111;position: relative;">

			<view class="content">
				<!-- <u-row customStyle="margin-bottom: 10px;">
				<u-col span="4">
					<view style="background-color: #f9f9f9;padding:10rpx;">
						<view style="font-size: 30rpx;">睡眠时长</view>
						<view class="hour">10<text class="danwei">时</text>15<text class="danwei">分</text></view>
					</view>
				</u-col>
				<u-col span="8">
					<view style="background-color: #f9f9f9;padding:10rpx; margin-left: 10rpx;">
						<view style="font-size: 30rpx;">睡眠评分</view>
						<view class="charts-box">
							<qiun-data-charts type="column" :opts="opts" :chartData="chartData" />
						</view>
					</view>
				</u-col>
			</u-row> -->
				<u-row customStyle="margin-bottom: 10px;">
					<u-col span="4">
						<view style="position: relative;margin: auto;">
							<image :src="$IMAGE_BASE_URL + '/img/shuimian6.png'"
								style=" width: 134rpx;height: 134rpx;margin: auto;">
							</image>
							<text
								style="position: absolute; top: 0; left: 0;font-size: 24rpx; width: 134rpx;font-weight: bold; line-height: 134rpx; text-align: center;">睡眠比例</text>
						</view>
					</u-col>
					<u-col span="8">
						<view class="sleep-time">
							<view class="yuan yuan1"> </view>
							<view class="name">深睡</view>
							<!-- <view>小时</view> -->
							<view class="bfb">({{report?report.deepSleep:'--'}}%)</view>
						</view>
						<view class="sleep-time">
							<view class="yuan yuan2"> </view>
							<view class="name">浅睡</view>
							<!-- <view>{{formatSecondsToTime(report.deepSleepDuration)}}小时</view> -->
							<view class="bfb">({{report?report.LightSleep:'--'}}%)</view>
						</view>
						<view class="sleep-time">
							<view class="yuan yuan3"> </view>
							<view class="name">其他</view>
							<!-- <view>小时</view> -->
							<view class="bfb">
								({{report?(100 - report.LightSleep*1 - report.deepSleep*1).toFixed(2):'--'}}%)</view>
						</view>
					</u-col>
				</u-row>
				<view :class="report?listClass(evaluateLength(report.eyeMove*1,20,25)):'list'">
					<view class="fl">
						<view class="shiji">快速眼动：{{report?formatSecondsToTime(report.eyeMoveDuration):'--'}}</view>
						<view class="jianyi">{{report?report.eyeMove:'--'}}%(建议:20%~25%)</view>
					</view>
					<view class="fr">{{report?evaluateLength(report.eyeMove*1,20,25):'--'}}</view>
				</view>
				<view :class="report?listClass(evaluateLength(report.effectiveSleepDuration/3600,7,10)):'list'">
					<view class="fl">
						<view class="shiji">有效睡眠时长：{{report?formatSecondsToTime(report.effectiveSleepDuration):'--'}}
						</view>
						<view class="jianyi">建议7-10小时</view>
					</view>
					<view class="fr">{{report?evaluateLength(report.effectiveSleepDuration/3600,7,10):'--'}}</view>
				</view>
				<view :class="report?listClass(evaluateLength(report.deepSleep/1,20,60)):'list'">
					<view class="fl">
						<view class="shiji">深睡时长：{{report?formatSecondsToTime(report.deepSleepDuration):'--'}}</view>
						<view class="jianyi">建议：20%-60%</view>
					</view>
					<view class="fr">{{report?evaluateLength(report.deepSleep/1,20,60):'--'}}</view>
				</view>
				<view :class="report?listClass(evaluateLength(report.LightSleep/1,20,60)):'list'">
					<view class="fl">
						<view class="shiji">浅睡时长：{{report?formatSecondsToTime(report.LightSleepDuration):'--'}}</view>
						<view class="jianyi">建议：20%-60%</view>
					</view>
					<view class="fr">{{report?evaluateLength(report.LightSleep/1,20,60):'--'}}</view>
				</view>
				<view class="list">
					<view class="fl">
						<view class="shiji">清醒时长：{{report?formatSecondsToTime(report.soberDuration):'--'}}</view>
						<!-- <view class="jianyi">包括中途离床时长</view> -->
					</view>
					<!-- <view class="fr">正常</view> -->
				</view>
				<view class="list">
					<view class="fl">
						<view class="shiji">清醒次数：{{report?report.soberSum:'--'}}</view>
						<!-- <view class="jianyi">包括中途离床时长</view> -->
					</view>
					<!-- <view class="fr">正常</view> -->
				</view>
				<view class="list">
					<view class="fl">
						<view class="shiji">呼吸质量：{{report?report.respiratoryQuality:'--'}}</view>
						<!-- <view class="jianyi">包括中途离床时长</view> -->
					</view>
					<!-- <view class="fr">正常</view> -->
				</view>
				<view class="list">
					<view class="fl">
						<view class="shiji">生命体征异常次数：{{report?report.respiratoryExceptionSum:'--'}}次</view>
						<!-- <view class="jianyi">建议0-2从</view> -->
					</view>
					<!-- <view class="fr">正常</view> -->
				</view>
			</view>
			<view class="content">
				<!-- <view class="tu">
					<view>
						<image src="@/img/shuimian7.png" style="height: 34rpx;width: 31rpx; margin-right: 10rpx;">
						</image>
						睡眠周期
					</view>
					<view class="zouqi">
						<view class="sleep">
							<view class="sleep-time">
								<view class="yuan yuan1"> </view>
								<view class="name">深睡</view>
							</view>
							<view class="sleep-time">
								<view class="yuan yuan2"> </view>
								<view class="name">浅睡</view>
							</view>
							<view class="sleep-time">
								<view class="yuan yuan3"> </view>
								<view class="name">其他</view>
							</view>
						</view>
						<view class="qian">
							<view style="width: 10%;" class="qian-data"></view>
							<view style="width: 16%; margin-left: 34%;" class="qian-data"></view>
						</view>
						<view class="shen">
							<view style="width: 16%; margin-left: 10%;" class="shen-data"></view>
							<view style="width: 30%; margin-left: 34%;" class="shen-data"></view>
						</view>
						<view class="other">
							<view style="width: 18%; margin-left: 26%;" class="other-data"></view>
							<view style="width: 10%; margin-left: 46%;" class="other-data"></view>
						</view>
					</view>
				</view> -->
				<view class="tu">
					<view>
						<image :src="$IMAGE_BASE_URL + '/img/shuimian8.png'"
							style="height: 30rpx;width: 25rpx; margin-right: 10rpx;">
						</image>
						心率
						<text
							style="color: #959595;font-size: 18rpx;">(最低{{report?report.minHeartRate:'--'}}，平均{{report?report.avgHeartRate:'--'}}，最高{{report?report.maxHeartRate:'--'}}次/分钟)</text>
						<!-- <text class="fr ">正常</text> -->
					</view>
					<view class="container">
						<view class="container-wrap">
							<!-- <echarts ref="echarts" :option="option" canvasId="echarts"></echarts> -->
							<lechart ref="echarts"></lechart>
						</view>
					</view>
				</view>
				<view class="tu">
					<view>
						<image :src="$IMAGE_BASE_URL + '/img/shuimian9.png'"
							style="height: 30rpx;width: 29rpx; margin-right: 10rpx;">
						</image>
						呼吸率
						<text
							style="color: #959595;font-size: 18rpx;">(最低{{report?report.minRespiratoryRate:'--'}}，平均{{report?report.avgRespiratoryRate:'--'}}，最高{{report?report.maxRespiratoryRate:'--'}}/分钟)</text>
						<!-- <text class="fr red">异常3次</text> -->
					</view>
					<!-- <view class="charts-box2">
					<qiun-data-charts type="scatter" :opts="opts3" :chartData="chartData3" />
				</view> -->
					<view class="container">
						<view class="container-wrap">
							<!-- <echarts ref="echarts2" :option="option" canvasId="echarts2"></echarts> -->
							<lechart ref="echarts2"></lechart>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCurrentPage
	} from '@/core/app'
	import {
		device
	} from "@/api/login/index.js";
	import {
		getStatistics,
		historyPropert
	} from "@/api/device/index.js";
	import StorageUtils from "@/utils/StorageUtils";
	// 条件编译引入小程序专用代码
	import lechart from "@/pages/chart/components/lime-echart/components/l-echart/l-echart.vue";
	import * as echarts from '../components/echarts.esm.min.js'
	export default {
		components: {
			lechart,
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		data() {
			return {
				show: false,
				option: {},
				startTime: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), 0, 0, 0, 0)
					.getTime(),
				endTime: Date.parse(new Date()),
				chartData: {},
				report: null,
				interval: {
					afResult_xmyk: '--',
					fatigueResult_xmyk: '--'
				},
				opts: {
					color: ["#FAC858"],
					padding: [0, 0, 0, 0],
					enableScroll: false,
					fontColor: '#fff',
					fontSize: 12,
					legend: {
						show: false
					},
					xAxis: {
						disabled: true,
						axisLine: false,
					},
					yAxis: {
						data: [{
							min: 0
						}],
						disabled: true,
						axisLine: false,
						disableGrid: true,
					},
					extra: {
						column: {
							type: "group",
							width: 16,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							linearType: "custom",
							labelPosition: "center",
							seriesGap: 5,
							linearOpacity: 0.5,
							barBorderCircle: true,
							customColor: [
								"#FA7D8D",
								"#EB88E2"
							]
						}
					}
				},

			};
		},
		onReady() {

		},
		mounted() {

		},
		onShow() {
			// this.iotDeviceId = getCurrentPage().query.iotDeviceId;
			if (StorageUtils.get('ReportData')) {
				const date = new Date(StorageUtils.get('ReportData'));
				// 当天第一秒：00:00:00.000
				const startOfDay = new Date(date);
				startOfDay.setHours(0, 0, 0, 0);
				// 当天最后一秒：23:59:59.999
				const endOfDay = new Date(date);
				endOfDay.setHours(23, 59, 59, 999);
				this.startTime = startOfDay.getTime();
				this.endTime = endOfDay.getTime();
			}
			this.load()
		},
		methods: {
			jump(url, data) {
				this.$navTo(url, data, 'redirectTo')
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			bindDateChange: function(e) {
				let date = e.detail.value.split('-')
				this.startTime = new Date(date[0] * 1, date[1] * 1 - 1, date[2] * 1, 0, 0, 0, 0).getTime();
				this.endTime = new Date(date[0] * 1, date[1] * 1 - 1, date[2] * 1, 23, 59, 59, 999).getTime();
				this.load()
			},
			change(e) {
				// console.log(e);
				this.startTime = Date.parse(new Date(e.result.replace(/-/g, '/')));
				this.endTime = Date.parse(new Date(e.result.replace(/-/g, '/'))) + 86400000;
				this.load()
				// console.log(this.Time);
				// this.endTime = Date.parse(new Date(e.endDate.replace(/-/g, '/')));
				// this.gethistoryPropert(this.iotDeviceId);
			},
			listClass(val) {
				if (val == '正常') {
					return 'list';
				} else {
					return 'list warning';
				}
			},
			/**
			 * 时间戳转季度信息（返回 { year: 年份, quarter: 季度(1-4), firstDay: 季度第一天时间戳, lastDay: 季度最后一天时间戳 }）
			 * @param {number} timestamp - 时间戳（毫秒）
			 * @returns {object} 季度信息
			 */
			getQuarterInfo(timestamp) {
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = date.getMonth() + 1; // 月份 1-12
				const quarter = Math.ceil(month / 3); // 季度 1-4
			
				// 计算季度第一天（00:00:00）
				const firstMonth = (quarter - 1) * 3 + 1;
				const firstDay = new Date(year, firstMonth - 1, 1, 0, 0, 0, 0).getTime();
			
				// 计算季度最后一天（23:59:59:999）
				const lastMonth = quarter * 3;
				const lastDay = new Date(year, lastMonth, 0, 23, 59, 59, 999).getTime();
			
				return {
					year,
					quarter,
					firstDay,
					lastDay
				};
			},
			/**
			 * 判断时间范围是否跨季度，跨则拆分为季度内数组
			 * @param {number} startTime - 开始时间戳（毫秒）
			 * @param {number} endTime - 结束时间戳（毫秒）
			 * @returns {Array} 时间范围数组（不跨季度则为 [startTime, endTime]，跨则为两段）
			 */
			splitTimeByQuarter(startTime, endTime) {
				const startQuarter = this.getQuarterInfo(startTime);
				const endQuarter = this.getQuarterInfo(endTime);
			
				// 判断是否跨季度（年份不同 或 季度不同）
				const isCrossQuarter =
					startQuarter.year !== endQuarter.year ||
					startQuarter.quarter !== endQuarter.quarter;
			
				if (!isCrossQuarter) {
					// 不跨季度：返回原时间范围
					return [{
						startTime,
						endTime
					}];
				} else {
					// 跨季度：拆分为两段
					return [{
							startTime,
							endTime: startQuarter.lastDay
						}, // 第一段：start到前季度末
						{
							startTime: endQuarter.firstDay,
							endTime
						} // 第二段：后季度初到end
					];
				}
			},
			async load() {
				const resultCross = this.splitTimeByQuarter(this.startTime, this.endTime)
				let report = []
				let rr = []
				let hr = []
				let xmyk = []
				for (const value of resultCross) {
					await Promise.all([
						historyPropert({
							deviceId: getCurrentPage().query.iotDeviceId,
							startTime: value.startTime,
							endTime: value.endTime,
							current: 1,
							size: 100000,
							identifier: 'rr',
							minute: true,
							load: false,
						}).then(res => {
							if (res.obj.records.length > 0) {
								rr = [...res.obj.records, ...rr]
							}
							
						}),
						historyPropert({
							deviceId: getCurrentPage().query.iotDeviceId,
							startTime: value.startTime,
							endTime: value.endTime,
							current: 1,
							size: 100000,
							identifier: 'hr',
							minute: true,
							load: false,
						}).then(res => {
							if (res.obj.records.length > 0) {
								hr = [...res.obj.records, ...hr]
							}
							
						}),
						historyPropert({
							startTime: value.startTime,
							endTime: value.endTime,
							current: 1,
							size: 100000,
							identifier: 'afResult_xmyk,fatigueResult_xmyk,report'
						}).then(res => {
							// 遍历数组，统计每个key下的value出现的次数
							if (res.obj.records.length > 0) {
								xmyk = [...res.obj.records, ...xmyk]
							}
							
						})
					]);
				}
				if (xmyk.length > 0) {
					// 创建一个对象来统计每个key下的value出现的次数
					const keyValueCount = {};
					xmyk.map((val,index) => {
						if (val.key == 'report') {
							report.push(val)
						}
					})
					xmyk.forEach(item => {
						const {
							key,
							value
						} = item;
						if (!keyValueCount[key]) {
							keyValueCount[key] = {};
						}
						if (keyValueCount[key][value]) {
							keyValueCount[key][value]++;
						} else {
							keyValueCount[key][value] = 1;
						}
					});
					// 找出每个key下出现次数最多的value
					const result = {};
					for (const key in keyValueCount) {
						let maxValue = null;
						let maxCount = 0;
						for (const value in keyValueCount[key]) {
							if (keyValueCount[key][value] > maxCount) {
								maxValue = value;
								maxCount = keyValueCount[key][value];
							}
						}
						result[key] = {
							value: maxValue,
							count: maxCount
						};
					}
					this.interval.afResult_xmyk = result.afResult_xmyk.value
					this.interval.fatigueResult_xmyk = result.fatigueResult_xmyk.value
				}
				if (report.length > 0) {
					this.report = JSON.parse(report[0].value.replace(/-/g, ""));
				} else {
					this.report = null;
				}
				if (hr.length > 0) {
					let data = [0]
					// let max = 0
					let Xdatas = ['']
					if (hr.length > 0) {
						data = []
						// let max = 0
						Xdatas = []
						hr.map(v => {
							if (v.value * 1 > 0) {
								data.push(v.value * 1)
								Xdatas.push(this.$u.timeFormat(v.time, 'hh:MM:ss'))
							}
						})
					}
					let color = ["#f9025a", '#ffebf0', '#ffb8c9'];
					this.option2 = {
						tooltip: {
							trigger: 'axis',
							confine: true,
							position: function(pt) {
								return [pt[0], '10%'];
							},
						},
						grid: {
							left: '0%',
							right: '0%',
							top: '4%',
							bottom: '15%',
							containLabel: true
						},
						xAxis: {
							type: 'category',
							splitLine: {
								show: false
							},
							data: Xdatas
						},
						yAxis: {
							type: 'value',
							// boundaryGap: [0, '100%'],
							// max: Math.ceil(max / 10) * 10,
						},
						series: [{
							name: '心率',
							type: 'line',
							symbol: 'none',
							sampling: 'lttb',
							itemStyle: {
								color: color[0]
							},
							areaStyle: {
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
									[{
											offset: 0,
											color: color[2]
										},
										{
											offset: 1,
											color: color[1]
										}
									])
							},
							data: data
						}]
					};
					this.$refs.echarts.init(echarts, chart => {
						chart.setOption(this.option2);
					});
				}
				if (rr.length > 0) {
					let data = [0]
					let Xdatas = ['']
					if (rr.length > 0) {
						data = []
						Xdatas = []
						rr.map(v => {
							if (v.value * 1 > 0) {
								data.push(v.value * 1)
								Xdatas.push(this.$u.timeFormat(v.time, 'hh:MM:ss'))
							}
						})
					}
			
					let color = ["#f9025a", '#ffebf0', '#ffb8c9'];
					this.option = {
						tooltip: {
							trigger: 'axis',
							confine: true,
							position: function(pt) {
								return [pt[0], '10%'];
							},
						},
						grid: {
							left: '0%',
							right: '0%',
							top: '4%',
							bottom: '15%',
							containLabel: true
						},
						xAxis: {
							type: 'category',
							splitLine: {
								show: false
							},
							data: Xdatas
						},
						yAxis: {
							type: 'value',
							// boundaryGap: [0, '100%'],
							// max: Math.ceil(max / 10) * 10,
						},
						series: [{
							name: '呼吸率',
							type: 'line',
							symbol: 'none',
							sampling: 'lttb',
							itemStyle: {
								color: color[0]
							},
							areaStyle: {
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
									[{
											offset: 0,
											color: color[2]
										},
										{
											offset: 1,
											color: color[1]
										}
									])
							},
			
							data: data
						}]
					};
					this.$refs.echarts2.init(echarts, chart => {
						chart.setOption(this.option);
					});
				}
			},
			formatSecondsToTime(seconds) {
				if (seconds == 0) {
					return '无'
				}
				// 计算小时数
				var hours = Math.floor(seconds / 3600);
				// 计算剩余的分钟数
				var minutes = Math.floor((seconds % 3600) / 60);
				// 如果小时数为0，则小时部分不显示（可选）
				var timeString = (hours > 0 ? hours + '小时' : '') + minutes.toString().padStart(2, '0');
				return timeString + '分钟';
			},
			evaluateLength(value, minValue, maxValue) {
				if (value < minValue) {
					return "偏短";
				} else if (value > maxValue) {
					return "偏长";
				} else {
					return "正常";
				}
			},
			//通过分数渐变
			getClassName() {
				let val = this.report ? this.report.sleepQualityScore : 100
				if (val >= 0 && val <= 59) {
					return 'bad jianbian';
				} else if (val >= 60 && val <= 89) {
					return 'general jianbian';
				} else if (val > 90) {
					return 'good jianbian';
				} else {
					return 'jianbian'; // 如果需要处理其他情况，可以返回默认类或空字符串
				}
			},
			//分数返回结果
			qualityText(val) {
				if (val >= 60 && val <= 89) {
					return '良好';
				} else if (val < 60) {
					return '差'; // 或者其他适当的文本
				} else {
					return '很好'; // 或者其他适当的文本
				}
			},
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					// let res = {
					// 	categories: ["10-1", "10-2", "10-3", "10-4", "10-5", "10-6", "10-6"],
					// 	series: [{
					// 		name: "评分",
					// 		data: [35, 36, 31, 33, 13, 34, 96]
					// 	}]
					// };
					// this.chartData = JSON.parse(JSON.stringify(res));
					// let base = +new Date(2024, 9, 3);
					// let oneDay = 24 * 3600 * 1000;
					// let date = [];
					// let data = [Math.random() * 300];
					// for (let i = 1; i < 5000; i++) {
					// 	var now = new Date((base += oneDay));
					// 	date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
					// 	data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
					// }

					// console.log(data);
					// this.$refs.echarts2.init(echarts, chart => {
					// 	chart.setOption(this.option);
					// });

				}, 500);
			}
		}
	}
</script>
<style lang="scss">
	.body {
		min-height: 100vh;
		background-color: #f4f8fb;
		padding: 30rpx;
	}

	.bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}

	.charts-box {
		width: 100%;
		height: 100rpx;
	}

	.charts-box2 {
		width: 100%;
		height: 300rpx;
	}

	.date-btn {
		width: 80%;
		margin: auto;
		background-color: #e4e7f8;
		border: #e4e7f8;
	}

	.date-btn-active {
		background-color: #fff;
	}

	.general {
		background: linear-gradient(to top right, #ccfff6, #07eacd) !important;

		.biaoqian {
			background-color: #07eacd !important;
		}
	}

	.bad {
		background: linear-gradient(to top right, #fbf7e4, #fdd209) !important;

		.biaoqian {
			background-color: #fdd209 !important;
		}
	}

	.jianbian {
		border-radius: 50%;
		overflow: hidden;
		width: 300px;
		background: linear-gradient(to top right, #b7fbd1, #72e29e);
		height: 230rpx;
		width: 230rpx;
		text-align: center;
		font-size: 24rpx;
		margin: auto;

		.biaoqian {
			width: 90rpx;
			margin: auto;
			background-color: #14db62;
			color: #fff;
			border-radius: 6rpx;
			line-height: 40rpx;
		}

		.pingfen {
			height: 190rpx;
			width: 190rpx;
			margin: 20rpx auto;
			background-color: #e5fdf6;
			border-radius: 50%;
			padding: 20rpx;
		}
	}

	.title {
		color: #646464;
		text-align: center;
		z-index: 111;
		position: relative;
	}

	.date-info {
		font-size: 24rpx;
		padding-left: 20rpx;

		image {
			margin-right: 10rpx;
			float: left;
		}


		.chaoguo {
			color: #959595;
			padding: 30rpx 0;
			line-height: 30rpx;

		}

		.info {
			.w50 {
				width: 50%;
				float: left;
				margin-bottom: 10rpx;
				line-height: 36rpx;
			}

			.name {
				color: #959595;
			}

			.plcd {
				line-height: 50rpx;
				margin-top: 10rpx;
				text-align: center;
				background-color: #0AD30A;
				color: #fff;
				border-radius: 30rpx;
				width: 60%;
				// margin: auto;
			}

			.fwb {
				font-weight: bold;
			}
		}
	}

	.content {
		background-color: #fff;
		box-shadow: 0px 0px 10rpx rgba(0, 0, 0, 0.5);
		border-radius: 20rpx;
		padding: 30rpx 10rpx 10rpx;
		line-height: 40rpx;
		margin-bottom: 30rpx;

		.hour {
			font-size: 58rpx;
			margin: 40rpx 0 10rpx 0;
		}

		.danwei {
			font-size: 22rpx;
		}

		.sleep-time:first-child {
			margin-top: 20rpx;
		}

		.sleep-time {
			display: flex;
			font-size: 24rpx;
			line-height: 24rpx;
			margin-bottom: 20rpx;

			.yuan {
				border-radius: 50%;
				height: 24rpx;
				width: 24rpx;
				margin-right: 20rpx;
			}

			.yuan1 {
				background-color: #079c42;
			}

			.yuan2 {
				background-color: #66de96;
			}

			.yuan3 {
				background-color: #feeb3d;
			}

			.name {
				margin-right: 50rpx;
			}

			.bfb {
				color: #959595;
				margin-left: 20rpx;
			}
		}
	}

	.list {
		margin: 10rpx;
		padding: 10rpx;
		overflow: hidden;

		.fl {
			float: left;
			font-size: 26rpx;

			.jianyi {
				font-size: 24rpx;
				color: #959595;
			}
		}

		.fr {
			margin-right: 20rpx;
			float: right;
			line-height: 80rpx;
			color: #07a1eb;
		}

	}

	.list.warning {
		background-color: #feecea;
		border-radius: 10rpx;

		.fr {
			color: #ff4039;
		}
	}

	.tu {
		.fr {
			float: right;
			color: #079c42;
			margin-right: 40rpx;
		}

		.red {
			color: #ff4039;
		}
	}

	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
	}

	.container-wrap {
		width: 100%;
		height: 700rpx;
	}

	.shen,
	.qian,
	.other {
		// display: flex;
		overflow: hidden;

		.shen-data {
			background: #7a0edb;
			border-radius: 10rpx;
			height: 42rpx;
			float: left;
		}

		.qian-data {
			background: #d26cff;
			border-radius: 10rpx;
			height: 42rpx;
			float: left;
		}

		.other-data {
			background: #ff7a75;
			border-radius: 10rpx;
			height: 42rpx;
			float: left;
		}
	}

	.zouqi {
		padding: 20rpx 40rpx;

		.sleep {
			overflow: hidden;
			margin-left: calc(50% - 214rpx);
			margin-bottom: 20rpx;

			.sleep-time {
				margin-top: 10rpx;
				float: left;
			}
		}
	}

	.pingfenbody {
		position: relative;
		z-index: 900;
		padding: 30rpx 0;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		background: linear-gradient(to bottom, #dffef4, #f7fbfa);
	}
</style>